<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				position:relative;
				width: 100px;
				height: 100px;
				background-color: red;
				animation: move1 2s;/*调用动画--动画名称 持续时间*/
				-webkit-animation:move1 5s infinite; /* Safari and Chrome */
			}
			/*定义动画*/
			
			@keyframes move1 {
				from {
					width: 100px;
					height: 100px;
					background-color: red;
					left: 0px;
				}
				to {
					width: 100px;
					height: 100px;
					background-color: #6495ED;
					left: 200px;
				}
			}
			
			@-webkit-keyframes move1{ /* Safari and Chrome */
				from {
					left: 0px;
				}
				to {
					left: 200px;
				}
			}
		</style>
	</head>

	<body>
		<div></div>
	</body>

</html>